<template>
	<div class="container home">
		<div class="header subheader">
			<Header></Header>
		</div>
		<div class="maincontainer">

			<div class="column-container">
				<div class="position">
					<!-- <span>首页</span>预警通 -->
				</div>
				<div class="collection">
					<span class="title">我收藏的企业 ({{collecttotal}}家)</span>
					<span class="fr pointer" @click="favorite">查看全部</span>
				</div>
				<div class="datecontainer">
					<el-button @click="datetime(1)" :class="timetype==1?'cur':''">近三天</el-button>
					<el-button @click="datetime(2)" :class="timetype==2?'cur':''">近一周</el-button>
					<el-button @click="datetime(3)" :class="timetype==3?'cur':''">近一个月</el-button>
					<el-date-picker style="margin-left: 10px;" v-model="dateRange" type="daterange" unlink-panels range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
						@change="handleDateChange">
					</el-date-picker>
				</div>
				<div class="monitor">
					<div class="monitor-title"><span>动态监测</span></div>
					<div class="monitor-main">
						<div class="tabs-title">
							<div class="box pointer" :class="tabsindex==1 && 'cur'" @click.self="tabsindex=1">按类型</div>
							<div class="box pointer" :class="tabsindex==2 && 'cur'" @click.self="tabsindex=2">按公司</div>
						</div>
						<div class="tabs-conten" v-show="tabsindex==1">
							<div class="statistics">
								<div class="title">按类型统计</div>
								<div class="statistics-box overflow" v-loading="loading">
									<div class="echarts fl" id="echarts"></div>
									<div class="echarts-list overflow">
										<div class="list" v-for="(item,index) in echartsdata" :key="index">
											<p>{{item.name}}</p>
											<span>{{item.value}}</span>条
										</div>
										<!-- <div class="list">
											<p>司法</p>
											<span>20</span>条
										</div>
										<div class="list">
											<p>经营</p>
											<span>20</span>条
										</div>
										<div class="list">
											<p>知识产权</p>
											<span>20</span>条
										</div>
										<div class="list">
											<p>招投标</p>
											<span>20</span>条
										</div>
										<div class="list">
											<p>融资</p>
											<span>20</span>条
										</div> -->
									</div>
								</div>
							</div>
							<div class="information">
								<div class="list-title">工商变更</div>
								<div class="list" v-if="changeuserlist.length > 0">
									<p v-for="(item,index) in changeuserlist" :key="index" class="pointer" @click="dynamics(startDate,1)">
										{{item.changeType}}<span class="fr">({{item.total}})</span></p>
									<!-- <p>法定代表人变更<span class="fr">(0)</span></p>
									<p>股东信息变更<span class="fr">(0)</span></p>
									<p>经营范围变更<span class="fr">(0)</span></p>
									<p>名称变更<span class="fr">(0)</span></p>
									<p>主要人员变更<span class="fr">(0)</span></p>
									<p>注册资本变更<span class="fr">(0)</span></p> -->
								</div>
								<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
								<div class="list-title">司法风险</div>
								<div class="list" v-if="sfcountlist.length > 0">
									<p v-for="(item,index) in sfcountlist" :key="index" class="pointer" @click="dynamics(startDate,5)">{{item.changeType}}<span
											class="fr">({{item.count}})</span></p>
									<!-- <p>限制高消费<span class="fr">(0)</span></p>
									<p>失信被执行人<span class="fr">(0)</span></p>
									<p>开庭公告<span class="fr">(0)</span></p>
									<p>裁判文书<span class="fr">(0)</span></p>
									<p>法院公告<span class="fr">(0)</span></p>
									<p>被执行人<span class="fr">(0)</span></p> -->
								</div>
								<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
								<div class="list-title">经营</div>
								<div class="list" v-if="jycountlist.length > 0">
									<p v-for="(item,index) in jycountlist" :key="index" class="pointer" @click="dynamics(startDate,4)">{{item.changeType}}<span
											class="fr">({{item.count}})</span></p>
									<!-- <p>行政处罚<span class="fr">(0)</span></p>
									<p>重大税收违法<span class="fr">(0)</span></p> -->
								</div>
								<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
								<div class="list-title">知识产权</div>
								<div class="list" v-if="cqcounlist.length > 0">
									<p v-for="(item,index) in cqcounlist" :key="index" class="pointer" @click="dynamics(startDate,3)">{{item.dType}}<span
											class="fr">({{item.total}})</span></p>
									<!-- <p>商标<span class="fr">(0)</span></p>
									<p>软件著作<span class="fr">(0)</span></p>
									<p>作品著作<span class="fr">(0)</span></p>
									<p>网站备案<span class="fr">(0)</span></p> -->
								</div>
								<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
								<div class="list-title">招投标</div>
								<div class="list" v-if="zbcounttotal > 0">
									<p @click="dynamics(startDate,6)" class="pointer">招投标<span class="fr">({{zbcounttotal}})</span></p>
								</div>
								<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
								<div class="list-title">融资</div>
								<div class="list" v-if="rzcountlist.length > 0">
									<p v-for="(item,index) in rzcountlist" :key="index" class="pointer" @click="dynamics(startDate,2)">{{item.changeType}}<span
											class="fr">({{item.count}})</span></p>
									<!-- <p>A轮<span class="fr">(0)</span></p>
									<p>B轮<span class="fr">(0)</span></p>
									<p>C轮<span class="fr">(0)</span></p>
									<p>e轮<span class="fr">(0)</span></p>
									<p>并购与合并<span class="fr">(0)</span></p>
									<p>战略融资/投资<span class="fr">(0)</span></p>
									<p>股权融资/转让<span class="fr">(0)</span></p>
									<p>定向增发<span class="fr">(0)</span></p> -->
								</div>
								<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
							</div>
						</div>
						<div class="tabs-conten" v-show="tabsindex==2">
							<div class="company-title">共涉及 <span>{{comforusertotal}}</span> 家企业
								<span>{{alldataNum}}</span> 条动态
							</div>
							<div class="company-list" v-if="comforusertotal > 0">
								<div class="list">

									<div class="table" v-loading="loadinglist">
										<el-table :data="comforuserlist" border style="width: 100%">
											<el-table-column type="index" label="序号" width="72">
												<template slot-scope="scope">
													<span>{{(compageNumber - 1) * 10 + scope.$index + 1}}</span>
												</template>
											</el-table-column>
											<el-table-column label="企业名称" width="300">
												<template slot-scope="scope">
													<span class="pointer" style="color: #0071DF;"
														v-if="scope.row.companyName != null"
														@click="details(scope.row.companyId)">{{scope.row.companyName}}</span>
													<span v-else>--</span>
												</template>
											</el-table-column>
											<el-table-column label="工商变更">
												<template slot-scope="scope">
													<div v-if="scope.row.gs != null">
														<span class="pointer" style="color: #0071DF;"
															v-if="scope.row.gs > 0"
															@click="details(scope.row.companyId)">{{scope.row.gs}}</span>
														<span v-else>{{scope.row.gs}}</span>
													</div>
													<span v-else>--</span>
												</template>
											</el-table-column>
											<el-table-column label="司法">
												<template slot-scope="scope">

													<div v-if="scope.row.sf != null">
														<span class="pointer" style="color: #0071DF;"
															v-if="scope.row.sf > 0"
															@click="details(scope.row.companyId)">{{scope.row.sf}}</span>
														<span v-else>{{scope.row.sf}}</span>
													</div>
													<span v-else>--</span>
												</template>
											</el-table-column>
											<el-table-column label="经营">
												<template slot-scope="scope">

													<div v-if="scope.row.jy != null">
														<span class="pointer" style="color: #0071DF;"
															v-if="scope.row.jy > 0"
															@click="details(scope.row.companyId)">{{scope.row.jy}}</span>
														<span v-else>{{scope.row.jy}}</span>
													</div>
													<span v-else>--</span>
												</template>
											</el-table-column>
											<el-table-column label="知识产权">
												<template slot-scope="scope">

													<div v-if="scope.row.cq != null">
														<span class="pointer" style="color: #0071DF;"
															v-if="scope.row.cq > 0"
															@click="details(scope.row.companyId)">{{scope.row.cq}}</span>
														<span v-else>{{scope.row.cq}}</span>
													</div>
													<span v-else>--</span>
												</template>
											</el-table-column>
											<el-table-column label="招投标">
												<template slot-scope="scope">

													<div v-if="scope.row.tb != null">
														<span class="pointer" style="color: #0071DF;"
															v-if="scope.row.tb > 0"
															@click="details(scope.row.companyId)">{{scope.row.tb}}</span>
														<span v-else>{{scope.row.tb}}</span>
													</div>
													<span v-else>--</span>
												</template>
											</el-table-column>
											<el-table-column label="融资">
												<template slot-scope="scope">

													<div v-if="scope.row.rz != null">
														<span class="pointer" style="color: #0071DF;"
															v-if="scope.row.rz > 0"
															@click="details(scope.row.companyId)">{{scope.row.rz}}</span>
														<span v-else>{{scope.row.rz}}</span>
													</div>
													<span v-else>--</span>
												</template>
											</el-table-column>
										</el-table>

									</div>
								</div>
								<div class="pagination overflow">
									<el-pagination class="fr" @current-change="comChange" background
										layout="prev, pager, next" :page-size="10" :total="comforusertotal">
									</el-pagination>
								</div>
							</div>
							<el-empty :image="require('../../assets/icons/icons.png')" v-else :image-size="200"></el-empty>
						</div>
					</div>
				</div>
				<div class="monitor realtime">
					<div class="monitor-title"><span>实时监控</span></div>
					<div class="monitor-main overflow">
						<div class="realtime-left fl">
							<div class="box pointer" :class="ltabsindex==1 && 'cur'" @click.self="ltabsindex=1">
								工商变更（{{changelisttotal}}）</div>
							<div class="box pointer" :class="ltabsindex==2 && 'cur'" @click.self="ltabsindex=2">
								司法（{{sffxyjtotal}}）</div>
							<div class="box pointer" :class="ltabsindex==3 && 'cur'" @click.self="ltabsindex=3">
								经营（{{jyfxyjtotal}}）</div>
							<div class="box pointer" :class="ltabsindex==4 && 'cur'" @click.self="ltabsindex=4">
								知识产权（{{propertytotal}}）</div>
							<div class="box pointer" :class="ltabsindex==5 && 'cur'" @click.self="ltabsindex=5">
								招投标（{{bidtotal}}）</div>
							<div class="box pointer" :class="ltabsindex==6 && 'cur'" @click.self="ltabsindex=6">
								融资（{{rztotal}}）</div>
						</div>
						<div class="realtime-right overflow">
							<div class="right-box" v-show="ltabsindex == 1">
								<template v-if="changelisttotal > 0">
									<div class="box" v-for="(item,index) in changelistlist" :key="index"
										@click="details(item.companyId,1,5)">
										<div class="title">
											{{item.companyName}}有1条{{item.changeType}}信息
											<span class="fr"><el-tag effect="plain">{{item.changeType}}</el-tag></span>
										</div>
										<div class="time"><i class="el-icon-time"></i>{{item.changeDate}}</div>
									</div>
									<div class="pagination">
										<el-pagination class="fr" @current-change="cChange" background
											layout="prev, pager, next" :page-size="10" :total="changelisttotal">
										</el-pagination>
									</div>
								</template>
								<template v-else>
									<el-empty :image="require('../../assets/icons/icons.png')" :image-size="200"></el-empty>
								</template>
							</div>
							<div class="right-box" v-show="ltabsindex == 2">
								<template v-if="sffxyjtotal > 0">
									<div class="box" v-for="(item,index) in sffxyjlist" :key="index"
										@click="details(item.companyId,3,item.changeType)">
										<div class="title">
											{{item.companyName}}有1条{{item.changeType}}信息
											<span class="fr"><el-tag effect="plain">{{item.changeType}}</el-tag></span>
										</div>
										<div class="time"><i class="el-icon-time"></i>{{item.changeDate}}</div>
									</div>
									<div class="pagination">
										<el-pagination class="fr" @current-change="sChange" background
											layout="prev, pager, next" :page-size="10" :total="sffxyjtotal">
										</el-pagination>
									</div>
								</template>
								<template v-else>
									<el-empty :image="require('../../assets/icons/icons.png')" :image-size="200"></el-empty>
								</template>
							</div>
							<div class="right-box" v-show="ltabsindex == 3">
								<template v-if="jyfxyjtotal > 0">
									<div class="box" v-for="(item,index) in jyfxyjlist" :key="index"
										@click="details(item.companyId,2,item.changeType)">
										<div class="title">
											{{item.companyName}}有1条{{item.changeType}}信息
											<span class="fr"><el-tag effect="plain">{{item.changeType}}</el-tag></span>
										</div>
										<div class="time"><i class="el-icon-time"></i>{{item.changeDate}}</div>
									</div>
									<div class="pagination">
										<el-pagination class="fr" @current-change="jChange" background
											layout="prev, pager, next" :page-size="10" :total="jyfxyjtotal">
										</el-pagination>
									</div>
								</template>
								<template v-else>
									<el-empty :image="require('../../assets/icons/icons.png')" :image-size="200"></el-empty>
								</template>
							</div>
							<div class="right-box" v-show="ltabsindex == 4">
								<template v-if="propertytotal > 0">
									<div class="box" v-for="(item,index) in propertylist" :key="index"
										@click="details(item.companyId,5,item.tType)">
										<div class="title">
											{{item.companyName}}有1条{{item.tType}}信息
											<span class="fr"><el-tag effect="plain">{{item.tType}}</el-tag></span>
										</div>
										<div class="time"><i class="el-icon-time"></i>{{item.tDate}}</div>
									</div>
									<div class="pagination">
										<el-pagination class="fr" @current-change="pChange" background
											layout="prev, pager, next" :page-size="10" :total="propertytotal">
										</el-pagination>
									</div>
								</template>
								<template v-else>
									<el-empty :image="require('../../assets/icons/icons.png')" :image-size="200"></el-empty>
								</template>
							</div>
							<div class="right-box" v-show="ltabsindex == 5">
								<template v-if="bidtotal > 0">
									<div class="box" v-for="(item,index) in bidlist" :key="index"
										@click="details(item.companyId,4,'招投标')">
										<div class="title">
											{{item.partyName}}有1条<span v-if="item.noticeType != null">{{item.noticeType}}</span><span v-else>招投标</span>信息
											<span class="fr"><el-tag effect="plain" v-if="item.noticeType != null">{{item.noticeType}}</el-tag><el-tag effect="plain" v-else>招投标</el-tag></span>
										</div>
										<div class="time"><i class="el-icon-time"></i>{{item.updateTime}}</div>
									</div>
									<div class="pagination">
										<el-pagination class="fr" @current-change="bChange" background
											layout="prev, pager, next" :page-size="10" :total="bidtotal">
										</el-pagination>
									</div>
								</template>
								<template v-else>
									<el-empty :image="require('../../assets/icons/icons.png')" :image-size="200"></el-empty>
								</template>
							</div>
							<div class="right-box" v-show="ltabsindex == 6">
								<template v-if="rztotal > 0">
									<div class="box" v-for="(item,index) in rzlist" :key="index"
										@click="details(item.companyId,4,'融资')">
										<div class="title">
											{{item.companyName}}有1条{{item.changeType}}信息
											<span class="fr"><el-tag effect="plain">{{item.changeType}}</el-tag></span>
										</div>
										<div class="time"><i class="el-icon-time"></i>{{item.changeDate}}</div>
									</div>
									<div class="pagination">
										<el-pagination class="fr" @current-change="rChange" background
											layout="prev, pager, next" :page-size="10" :total="rztotal">
										</el-pagination>
									</div>
								</template>
								<template v-else>
									<el-empty :image="require('../../assets/icons/icons.png')" :image-size="200"></el-empty>
								</template>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<Footer></Footer>

	</div>
</template>

<script>
	import {
		comforuserapi,
		typeforuserapi,
		changelistapi,
		sffxyjapi,
		jyfxyjapi,
		propertyapi,
		bidapi,
		rzapi,
		collectlistapi,
		changeuserapi,
		sfcountapi,
		jycountapi,
		cqcountapi,
		zbcountapi,
		rzcountapi
	} from "@/api/warning/index";
	import moment from 'moment';
	import * as echarts from 'echarts';
	import Header from "@/components/header";
	import Footer from "@/components/footer";
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				dateRange: [],
				listtotal: 20,
				tabsindex: 1,
				echartsdata: [],
				loading: true,
				comforusertotal: 0,
				comforuserlist: [],
				ltabsindex: 1,
				changelistlist: [],
				changelisttotal: 0,
				sffxyjlist: [],
				sffxyjtotal: 0,
				jyfxyjlist: [],
				jyfxyjtotal: 0,
				propertylist: [],
				propertytotal: 0,
				bidlist: [],
				bidtotal: 0,
				rzlist: [],
				rztotal: 0,
				endDate: '',
				startDate: '',
				timetype: 1,
				userId: '',
				phonenumber: '',
				cpageNumber: 1,
				spageNumber: 1,
				jpageNumber: 1,
				ppageNumber: 1,
				bpageNumber: 1,
				rpageNumber: 1,
				compageNumber: 1,
				alltotal: 0,
				collecttotal: 0,
				zbcounttotal: 0,
				changeuserlist: [],
				sfcountlist: [],
				jycountlist: [],
				cqcounlist: [],
				rzcountlist: [],
				alldataNum: 0,
				loadinglist:true
			};
		},
		created() {
			this.echartsdata = []
			if (JSON.parse(sessionStorage.getItem('user') != null)) {
				this.userdata = JSON.parse(sessionStorage.getItem('user'));
				this.userId = JSON.parse(sessionStorage.getItem('userId'));
				this.phonenumber = this.userdata.phonenumber
			}
			this.startDate = moment().subtract(2, "days").format('YYYY-MM-DD') //前3天
			this.endDate = moment().format('YYYY-MM-DD')
			this.collectinit()
			// this.init()
			// this.comforuserinit()

			// this.changelistinit()
			// this.sffxyjinit()
			// this.jyfxyjinit()
			// this.propertyinit()
			// this.bidinit()
			// this.rzinit()

			// this.changeuserinit()
			// this.sfcountinit()
			// this.jycountinit()
			// this.cqcountinit()
			// this.zbcountinit()
			// this.rzcountinit()
		},
		mounted() {

		},
		methods: {
			datetime(type) {
				this.echartsdata = []
				this.loading = true
				this.dateRange = []
				this.timetype = type
				if (type == 1) {
					this.startDate = moment().subtract(2, "days").format('YYYY-MM-DD') //前3天
				} else if (type == 2) {
					this.startDate = moment().subtract(6, "days").format('YYYY-MM-DD') //前7天
				} else if (type == 3) {
					this.startDate = moment().subtract(1, "month").format('YYYY-MM-DD')
				}
				this.collectinit()
				// this.init()
				// this.comforuserinit()

				// this.changelistinit()
				// this.sffxyjinit()
				// this.jyfxyjinit()
				// this.propertyinit()
				// this.bidinit()
				// this.rzinit()

				// this.changeuserinit()
				// this.sfcountinit()
				// this.jycountinit()
				// this.cqcountinit()
				// this.zbcountinit()
				// this.rzcountinit()
			},
			collectinit() {
				let userId = this.userId
				collectlistapi(userId).then(res => {
					this.collecttotal = res.data.total
					this.init()
					this.comforuserinit()
				})
			},
			init() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				typeforuserapi(queryParams).then(res => {
					this.loading = false
					let dataNum = 0;
					this.echartsdata = []
					res.data.content.forEach(item => {
						this.echartsdata.push({
							value: item.total,
							name: item.dType
						})

					})
					for (var i = 0; i < res.data.content.length; i++) {
						dataNum += res.data.content[i].total;
					}
					this.alldataNum = dataNum
					console.log('dataNum', dataNum)
					this.echartsinit(dataNum)
					
					this.changelistinit()
					this.sffxyjinit()
					this.jyfxyjinit()
					this.propertyinit()
					this.bidinit()
					this.rzinit()
					
					this.changeuserinit()
					this.sfcountinit()
					this.jycountinit()
					this.cqcountinit()
					this.zbcountinit()
					this.rzcountinit()
				})

			},
			echartsinit(dataNum) {
				var statisticsecharts = echarts.init(document.getElementById('echarts'));
				statisticsecharts.setOption({
					title: [{
							text: "共计 (条)", //主标题文本
							left: "center",
							top: "40%",
							textStyle: {
								fontFamily: "微软雅黑",
								fontSize: 12,
								color: "#656C74",
							},
						},
						{
							text: dataNum, //主标题文本
							left: "center",
							top: "50%",
							textStyle: {
								fontSize: 24,
								color: "#000000",
								align: "center",
							},
						},
					],
					series: [{
						name: '按类型',
						type: 'pie',
						radius: ['60%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						data: this.echartsdata,
						color: ['#4D94FF', '#21D9C6', '#FF9F40', '#FFCC00', '#8173FF',
							'#C773FF'
						] // 自定义颜色顺序
					}]
				})
			},
			comforuserinit() {
				let queryParams = {
					dType: 0,
					endDate: this.endDate,
					pageNumber: this.compageNumber,
					pageSize: 10,
					startDate: this.startDate,
					userId: this.userId
				}
				comforuserapi(queryParams).then(res => {
					this.loadinglist = false
					if (res.errcode == 0) {
						this.comforuserlist = res.data.content
						this.comforusertotal = res.data.total
						var alltotal = 0;
						for (var i = 0; i < res.data.content.length; i++) {
							alltotal += res.data.content[i].total;
						}
						this.alltotal = alltotal
						return alltotal;

					}

				});
			},
			comChange(val) {
				this.loadinglist = true
				this.compageNumber = val
				this.comforuserinit()
			},
			changelistinit() {
				let queryParams = {
					endDate: this.endDate,
					pageNumber: this.cpageNumber,
					pageSize: 10,
					startDate: this.startDate,
					userId: this.userId
				}
				changelistapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.changelistlist = res.data.content
						this.changelisttotal = res.data.total
					}
				});
			},
			cChange(val) {
				this.cpageNumber = val
				this.changelistinit()
			},
			changeuserinit() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				changeuserapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.changeuserlist = res.data.content
						this.changeusertotal = res.data.total
					}
				});
			},
			sfcountinit() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				sfcountapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.sfcountlist = res.data.content
					}
				});
			},
			jycountinit() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				jycountapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.jycountlist = res.data.content
					}
				});
			},
			cqcountinit() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				cqcountapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.cqcounlist = res.data.content
					}
				});
			},
			zbcountinit() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				zbcountapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.zbcounttotal = res.data.content[0].total
					}
				});
			},
			rzcountinit() {
				let queryParams = {
					endDate: this.endDate,
					startDate: this.startDate,
					userId: this.userId
				}
				rzcountapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.rzcountlist = res.data.content
					}
				});
			},
			sffxyjinit() {
				let queryParams = {
					endDate: this.endDate,
					pageNumber: this.spageNumber,
					pageSize: 10,
					startDate: this.startDate,
					phonenumber: this.phonenumber,
					userId: this.userId
				}
				sffxyjapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.sffxyjlist = res.data.content
						this.sffxyjtotal = res.data.total
					}
				});
			},
			sChange(val) {
				this.spageNumber = val
				this.sffxyjinit()
			},
			jyfxyjinit() {
				let queryParams = {
					endDate: this.endDate,
					pageNumber: this.jpageNumber,
					pageSize: 10,
					startDate: this.startDate,
					phonenumber: this.phonenumber,
					userId: this.userId
				}
				jyfxyjapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.jyfxyjlist = res.data.content
						this.jyfxyjtotal = res.data.total
					}
				});
			},
			jChange(val) {
				this.jpageNumber = val
				this.jyfxyjinit()
			},
			propertyinit() {
				let queryParams = {
					endDate: this.endDate,
					pageNumber: this.ppageNumber,
					pageSize: 10,
					startDate: this.startDate,
					phonenumber: this.phonenumber,
					userId: this.userId
				}
				propertyapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.propertylist = res.data.content
						this.propertytotal = res.data.total
					}
				});
			},
			pChange(val) {
				this.ppageNumber = val
				this.propertyinit()
			},
			bidinit() {
				let queryParams = {
					endDate: this.endDate,
					pageNumber: this.bpageNumber,
					pageSize: 10,
					startDate: this.startDate,
					phonenumber: this.phonenumber,
					userId: this.userId
				}
				bidapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.bidlist = res.data.content
						this.bidtotal = res.data.total
					}
				});
			},
			bChange(val) {
				this.bpageNumber = val
				this.bidinit()
			},
			rzinit() {
				let queryParams = {
					endDate: this.endDate,
					pageNumber: this.rpageNumber,
					pageSize: 10,
					startDate: this.startDate,
					phonenumber: this.phonenumber,
					userId: this.userId
				}
				rzapi(queryParams).then(res => {
					if (res.errcode == 0) {
						this.rzlist = res.data.content
						this.rztotal = res.data.total
					}
				});
			},
			rChange(val) {
				this.rpageNumber = val
				this.rzinit()
			},
			favorite() {
				this.$router.push({
					path: '/favorite'
				})
			},
			details(id,index,type) {
				this.$router.push({
					path: '/details',
					query: {
						id: id,
						index:index,
						type:type,
						wdtype:1
					}
				})
			},
			dynamics(startDate,dType){
				this.$router.push({
					path: '/Companydynamics',
					query: {
						startDate: startDate,
						dType:dType
					}
				})
			},
			handleDateChange(value) {
				this.timetype = 10
				this.loading = true
				this.echartsdata = []
				this.startDate = value[0]
				this.endDate = value[1]
				
				this.collectinit()
				// this.init()
				// this.comforuserinit()

				// this.changelistinit()
				// this.sffxyjinit()
				// this.jyfxyjinit()
				// this.propertyinit()
				// this.bidinit()
				// this.rzinit()

				// this.changeuserinit()
				// this.sfcountinit()
				// this.jycountinit()
				// this.cqcountinit()
				// this.zbcountinit()
				// this.rzcountinit()
			}
		}
	};
</script>

<style scoped lang="scss">
	.home {
		.subheader {
			height: 100px;
			background: linear-gradient(180deg, #3460D7 0%, #3D62CC 100%);

			.navbar {
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				height: 100px;
				padding: 0 30px;

				.logo {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
					font-size: 26px;
					color: #fff;
					font-weight: bold;
					margin-right: 8%;

					img {
						margin-right: 11px;
					}
				}

				.nav {
					display: flex;
					height: 100px;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: #fff;
					font-weight: bold;

					.box {
						position: relative;
						height: 100px;
						line-height: 100px;

						span {
							position: absolute;
							left: 0;
							bottom: 0;
							height: 5px;
							background: #fff;
							display: block;
							width: 60px;
						}
					}

					.box::after {
						content: "|";
						margin: 0 36px;
						color: rgba(255, 255, 255, 0.2);
						font-weight: initial;
						font-size: 18px;
					}

					.box:last-child::after {
						display: none;
					}

				}

				.user {
					display: flex;
					height: 95px;
					justify-content: center;
					align-items: center;

					.box {
						font-size: 16px;
						line-height: 28px;
						color: #FFFFFF;
						font-weight: 400;
						background: url(../../assets/images/usericon.png) no-repeat left center;
						padding-left: 22px;
					}

					.bt {
						width: 62px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #000000;
						font-weight: 400;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}

			.slogan {
				color: #fff;
				font-size: 42px;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				letter-spacing: 3px;
				line-height: 55px;
				padding: 84px 0 54px;
			}

			.search {
				display: flex;
				justify-content: center;
				align-items: center;

				.box {
					display: flex;

					.search-bt {
						width: 120px;
						height: 53px;
						background: #217FE4;
						border-radius: 0px 4px 4px 0px;
						font-size: 22px;
						color: #FFFFFF;
						font-weight: 400;
						text-align: center;
						line-height: 53px;
						letter-spacing: 2px;
					}
				}

				.advanced-search {
					width: 32px;
					height: 40px;
					line-height: 20px;
					font-size: 16px;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 12px;
					cursor: pointer;
				}
			}
		}

		.column-container {
			.position {
				font-weight: 400;
				font-size: 18px;
				color: #6F6F6F;
				line-height: 24px;
				margin: 24px 0;
				background: url(../../assets/images/iconhome.png) no-repeat left center;
				padding-left: 26px;

				span {
					color: #0071DF;
				}

				span::after {
					content: '/';
					margin: 0 12px;
					color: #6F6F6F;
				}
			}

			.collection {
				height: 60px;
				line-height: 60px;
				box-shadow: 0px 8px 24px 0px rgba(15, 43, 178, 0.12);
				border-radius: 12px 12px 12px 12px;
				border: 1px solid #E8EAEC;
				background: linear-gradient(270deg, #FFFBF7 0%, #FFF3E8 100%);
				padding: 0 20px 0 16px;

				.title {
					font-weight: bold;
					font-size: 18px;
					color: #FF8C1A;
					background: url(../../assets/images/collection.png) no-repeat left center;
					display: inline-block;
					padding-left: 44px;
				}

				.fr {
					font-weight: 400;
					font-size: 14px;
					color: #0071DF;
					background: url(../../assets/images/collectionright.png) no-repeat right center;
					padding-right: 24px;
					display: inline-block;
				}
			}

			.datecontainer {
				margin: 32px 0 24px;
			}

			.monitor {
				background: #FFFFFF;
				box-shadow: 0px 4px 12px 0px rgba(20, 85, 210, 0.12);
				border-radius: 12px;
				min-height: 200px;

				.monitor-title {
					height: 60px;
					line-height: 60px;
					background: linear-gradient(90deg, #E5F3FF 0%, #F4FAFF 100%);
					font-weight: bold;
					font-size: 18px;
					color: #0071DF;
					padding: 0 16px;

					span {
						background: url(../../assets/images/monitor.png) no-repeat left center;
						display: block;
						padding-left: 44px;
					}
				}

				.monitor-main {
					padding: 16px 24px;

					.tabs-title {
						overflow: hidden;
						background: #EDF1F5;
						height: 58px;
						line-height: 58px;
						text-align: center;
						border: 1px solid #E0E0E0;
						font-weight: bold;
						font-size: 20px;
						color: #000000;
						margin-bottom: 16px;

						.box {
							width: 50%;
							float: left;
						}

						.cur {
							background: linear-gradient(90deg, #0071DF 0%, #5E99EC 100%, #649CED 100%);
							color: #fff;
						}
					}

					.tabs-conten {
						.statistics {
							background: #FFFFFF;
							border-radius: 12px 12px 12px 12px;
							border: 1px solid #E0E0E0;
							padding: 24px 8px;
							margin-bottom: 24px;

							.title {
								font-weight: 500;
								font-size: 18px;
								color: #222222;
								line-height: 28px;
							}

							.statistics-box {
								.echarts {
									height: 262px;
									width: 262px;
									margin: 0 56px 0 100px;
								}

								.echarts-list {
									.list {
										width: 122px;
										float: left;
										margin-right: 20px;
										font-weight: 400;
										font-size: 12px;
										color: #8173FF;
										margin-top: 24px;

										p {
											margin: 0;
											padding: 0px 0 0 0;
											font-weight: 400;
											font-size: 14px;
											color: #656C74;
											line-height: 22px;
											margin-bottom: 4px;
										}

										span {
											font-weight: 500;
											font-size: 20px;
											color: #0071DF;
											margin-right: 2px;
										}
									}

									.list::before {
										content: "|";
										float: left;
										height: 50px;
										background: #4D94FF;
										display: block;
										margin-right: 8px;
										border-radius: 100px;
									}

									.list:nth-child(2)::before {
										background: #21D9C6;
									}

									.list:nth-child(2) {
										color: #21D9C6;

										span {
											color: #21D9C6;
										}
									}

									.list:nth-child(3)::before {
										background: #FF9F40;
									}

									.list:nth-child(3) {
										color: #FF9F40;

										span {
											color: #FF9F40;
										}
									}

									.list:nth-child(4)::before {
										background: #FFCC00;
									}

									.list:nth-child(4) {
										color: #FFCC00;

										span {
											color: #FFCC00;
										}
									}

									.list:nth-child(5)::before {
										background: #8173FF;
									}

									.list:nth-child(5) {
										color: #8173FF;

										span {
											color: #8173FF;
										}
									}

									.list:nth-child(6)::before {
										background: #C773FF;
									}

									.list:nth-child(6) {
										color: #C773FF;

										span {
											color: #C773FF;
										}
									}
								}
							}
						}

						.company-title {
							font-weight: 400;
							font-size: 15px;
							color: #000000;
							padding: 8px 0;
							margin-bottom: 24px;

							span {
								color: #FF8C1A;
							}
						}

						.company-list {
							.list {
								.name {
									font-weight: bold;
									font-size: 18px;
									color: #000000;
									line-height: 36px;
									overflow: hidden;

									span {
										width: 36px;
										height: 36px;
										background: #7DB3DA;
										border-radius: 4px 4px 4px 4px;
										display: inline-block;
										text-align: center;
										font-weight: 400;
										font-size: 12px;
										color: #FFFFFF;
										line-height: 36px;
										margin-right: 15px;
										float: left;
									}
								}

								.table {
									margin: 16px 0 32px;

									table {
										width: 100%;
										text-align: center;
										border-right: 1px solid #E8EAEC;
										border-bottom: 1px solid #E8EAEC;
										border-radius: 4px;
										overflow: hidden;

										td {
											height: 51px;
											border-left: 1px solid #E8EAEC;
											border-top: 1px solid #E8EAEC;
										}

										.hed {
											td {
												height: 46px;
												background: #F4F8FC;
											}
										}
									}
								}

							}
						}

						.information {
							.list-title {
								font-weight: bold;
								font-size: 20px;
								color: #222222;
								margin-bottom: 20px;
								line-height: 26px;
							}

							.list-title::before {
								content: '|';
								color: #217FE4;
								margin-right: 12px;
							}

							.list {
								overflow: hidden;
								padding-bottom: 8px;

								p {
									padding: 0 24px;
									margin: 0 15px 16px 0;
									width: 218px;
									height: 45px;
									line-height: 45px;
									background: #FFFFFF;
									border-radius: 2px 2px 2px 2px;
									border: 1px solid #C9CACC;
									float: left;
									font-weight: 400;
									font-size: 16px;
									color: #000000;

									span {
										color: #0071DF;
									}
								}
								p:first-child{
									margin-left: 0;
								}
								// p:nth-child(5n+1) {
								// 	margin-left: 0;
								// }
							}
						}
					}
				}
			}

			.realtime {
				margin-top: 32px;

				.monitor-title {
					span {
						background: url(../../assets/images/realtime.png) no-repeat left center;
					}
				}

				.realtime-left {
					width: 180px;
					margin-right: 40px;

					.box {
						height: 48px;
						line-height: 48px;
						text-align: center;
						background: #EDF3F9;
						border-radius: 2px 2px 2px 2px;
						margin-bottom: 10px;
						font-weight: 400;
						font-size: 16px;
						color: #000000;
					}

					.cur {
						background: #217FE4;
						color: #FFFFFF;
					}
				}

				.realtime-right {
					.box {
						padding: 20px 0;
						border-bottom: 1px solid #E8EAEC;
						cursor: pointer;

						.title {
							font-weight: 400;
							font-size: 18px;
							color: #000000;
							line-height: 30px;
							margin-bottom: 13px;
						}

						.time {
							font-weight: 400;
							font-size: 16px;
							color: #999999;

							i {
								margin-right: 3px;
							}
						}
					}

					.box:hover {
						.title {
							color: #0071DF;
						}
					}

					.pagination {
						padding-top: 45px;
						padding-bottom: 10px;
						overflow: hidden;
					}
				}
			}
		}


		.common-footer {
			min-height: 79px;
			background: #EFF1F3;
			font-size: 12px;
			color: #656C74;
			line-height: 17px;
			margin-top: 98px;

			.topnav {
				padding: 16px 0 12px;
				text-align: center;
				display: flex;
				justify-content: center;

				.box::after {
					content: '|';
					margin: 0 12px;
					color: #656C74;
				}

				.box:last-child::after {
					display: none;
				}
			}

			.binfo {
				display: flex;

				.box {
					margin-right: 90px;
				}

				.box:last-child {
					margin-right: 0;
					background: url(../../assets/images/ficon01.png) no-repeat left center;
					padding-left: 20px;
				}
			}
		}
	}
</style>
<style>
	.el-button.cur {
		background: #EEF7FF;
		border: 1px solid #4D94FF;
		border-color: #4D94FF;
		color: #000;
	}

	.el-table .cell {
		font-size: 16px;
		color: #000000;
		line-height: 25px;
		padding: 5px 20px;
		font-weight: 400;
	}

	.dialogtable .el-table .cell .el-table--border .el-table__cell:first-child .cell {
		padding-left: 20px;
	}

	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background: #F7FBFF;
	}

	.dialogtable .el-table .cell {
		font-size: 14px;
		padding: 2px 15px;
	}

	.el-dialog__header {
		border-bottom: 2px dashed #eee;
	}
</style>